<html>

<head>
  <meta charset="UTF-8">

  <title>demo</title>
  <link rel="stylesheet" href="./v5.3.0-dist/ol.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    .ol-popup {
      position: absolute;
      background-color: #ffffff;
      border: 1px solid #cccccc;
      border-radius: 10;
      padding: auto;
      min-width: 280px;
      left: -50px;
      bottom: 12px;
      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    }

    .ol-popup:after,
    .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }

    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }

    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
    }

    .ol-popup-closer:after {
      content: "X";
    }

    /* 缩放滑块控件ZoomSlider的样式，放置到缩放按钮之间实现导航条功能*/
    #map .ol-zoom .ol-zoom-out {
      margin-top: 204px;
    }

    #map .ol-zoomslider {
      background-color: transparent;
      top: 2.3em;
    }

    #map .ol-touch .ol-zoom .ol-zoom-out {
      margin-top: 212px;
    }

    #map .ol-touch .ol-zoomslider {
      top: 2.75em;
    }

    #map .ol-zoom-in .ol.has-tooltip:hover[role=tooltip],
    #map .ol-zoom-in .ol-has-tooltip:focus[role=tooltip] {
      top: 3px;
    }

    #map .ol-zoom-out .ol-has-tooltip:hover[role=tooltip],
    #map .ol-zoon-out .ol-has-out-tooltip:focus[role=tooltip] {
      top: 232px;
    }

    /* 鼠标位置信息自定义样式设置 */
    .custom-mouse-position {
            color: rgb(0,0,0);
            font-size: 16px;
            font-family: "微软雅黑";
        }
  </style>
  <script src="./v5.3.0-dist/ol.js"></script>
</head>

<body><div id="mouse-position">
    </div>
  <div id="map">
    
  </div>
  
  <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
  </div>

  <script type="text/javascript">
    /***
     * 使用变量缓存DOM对象
     * 
     * */
    var container = document.getElementById("popup");
    var content = document.getElementById("popup-content");
    var closer = document.getElementById("popup-closer");

    /**
     * 创建一个overlay叠加层对象用于显示弹窗
     * 
     * */
    var overlay = new ol.Overlay({
      element: container,
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      }
    });

    closer.onclick = function () {
      overlay.setPosition(undefined);
      closer.blur();
      return false;
    };

    // 创建地图
    var map = new ol.Map({
      view: new ol.View({
        center: ol.proj.transform([118.77361244, 31.82819401], 'EPSG:4326', 'EPSG:3857'),
        zoom: 8, // 地图默认缩放级别
        maxZoom: 19,  // 地图最大缩放级别
        minZoom: 1,  // 地图最小缩放级别
      }),
      target: 'map', // 地图容器id
    })

    // 创建一个使用离线地图瓦片的层
    var offlineMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: './tiles/{z}/{x}/{y}.png',
      })
    });

    // 将层添加进地图
    map.addLayer(offlineMapLayer);
    map.addOverlay(overlay);
    // 创建要素1
    var iconFeature1 = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([118.77361244, 31.82849401], 'EPSG:4326', 'EPSG:3857')),
    });

    // 创建要素2
    var iconFeature2 = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([118.77361244, 31.82789401], 'EPSG:4326', 'EPSG:3857')),
    });

    // 点样式
    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon(({
        anchor: [0.5, 0.5], // 锚点 默认值为图片中心
        src: './img/plane2.png', // 图标路径
      }))
    });

    // 要素添加样式
    iconFeature1.setStyle(iconStyle);
    iconFeature2.setStyle(iconStyle);
    iconFeature1.on('singleclick', function (evt) {
      alert('iconFeature1 clicked');
      return true;
    });
    iconFeature2.on('singleclick', function (evt) {
      alert('iconFeature2 clicked');
      return true;
    })
    //设置ICON位置
    iconFeature1.setGeometry(new ol.geom.Point(ol.proj.transform([118.77261244, 31.82849401], 'EPSG:4326', 'EPSG:3857')));
    // 矢量图层数据来源
    var vectorSource = new ol.source.Vector({
      features: [iconFeature1, iconFeature2]
    });

    // 矢量图层
    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
    });

    // 矢量图层添加进地图
    map.addLayer(vectorLayer);


    map.on("singleclick", function (evt) {
      var coordinate = evt.coordinate;
      console.log(coordinate)
      var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));

      content.innerHTML = "<p>你点击了这里：</p><code>" + hdms + "</code>";
      overlay.setPosition(coordinate);
    });

    //实例化ZoomSlider控件并加载到地图容器中
    var zoomslider = new ol.control.ZoomSlider();
    map.addControl(zoomslider);

    //实例化比例尺控件（ScaleLine）
    var scaleLineControl = new ol.control.ScaleLine({
      //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
      units: "metric"
    });
    map.addControl(scaleLineControl);

    var mousePositionControl = new ol.control.MousePosition({
      //坐标格式
      coordinateFormat: ol.coordinate.createStringXY(7),
      //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
      projection: 'EPSG:4326',
      //坐标信息显示样式类名，默认是'ol-mouse-position'
      className: 'custom-mouse-position',
      //显示鼠标位置信息的目标容器
      target: document.getElementById('mouse-position'),
      //未定义坐标的标记
      undefinedHTML: '&nbsp;'
    });//TODO:调整custom-mouse-position样式，使鼠标位置显示控件悬浮显示在地图上方
    map.addControl(mousePositionControl);
  </script>

</body>

</html>